<template>  
  <div class="feature" @mouseenter="hover = true" @mouseleave="hover = false">  
      <h3>{{ title }}</h3>  
      <p>{{ description }}</p>  
  </div>  
</template>  

<script>  
export default {  
  name: 'Feature',  
  props: {  
      title: {  
          type: String,  
          default: '默认标题'  
      },  
      description: {  
          type: String,  
          default: '默认描述'  
      }  
  },  
  data() {  
      return {  
          hover: false, // 用于控制悬停状态  
      };  
  },  
}  
</script>  

<style scoped>  
.feature {  
  margin: 20px 0;  
  padding: 15px;  
  background-color: #eef; /* 淡蓝色背景 */  
  border: 1px solid #007bff; /* 边框为蓝色 */  
  border-radius: 8px; /* 圆角 */  
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* 更明显的阴影 */  
  transition: transform 0.2s ease, background-color 0.3s ease; /* 过渡效果 */  
  cursor: pointer; /* 鼠标指针为手形 */  
}  

/* 悬停时的样式 */  
.feature:hover {  
  transform: translateY(-4px); /* 向上浮动效果 */  
  background-color: #d4e6f4; /* 悬停时改变背景颜色 */  
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); /* 增加阴影 */  
}  

h3 {  
  margin: 0; /* 去掉默认外边距 */  
  color: #333; /* 标题颜色 */  
  font-size: 1.5em; /* 标题字体大小 */  
}  

p {  
  margin: 5px 0 0; /* 段落上方有一个间距 */  
  color: #666; /* 描述颜色 */  
  font-size: 1em; /* 描述字体大小 */  
}  
</style>